<template>
  <div class="ai-function-panel">
    <div class="panel-header">
      <h3 class="panel-title">
        AI功能
      </h3>
      <p class="panel-subtitle">
        选择您需要的AI服务
      </p>
    </div>
    
    <div class="function-grid">
      <div
        v-for="(config, key) in aiStore.functionConfig"
        :key="key"
        class="function-card"
        :class="{ 
          active: aiStore.currentFunction === key,
          disabled: aiStore.isLoading 
        }"
        @click="selectFunction(key)"
      >
        <div class="card-icon">
          <span class="icon-emoji">{{ config.icon }}</span>
        </div>
        
        <div class="card-content">
          <h4 class="card-title">
            {{ config.title }}
          </h4>
          <p class="card-description">
            {{ config.description }}
          </p>
        </div>
        
        <div
          v-if="aiStore.currentFunction === key"
          class="card-indicator"
        >
          <svg
            class="w-4 h-4"
            fill="currentColor"
            viewBox="0 0 24 24"
          >
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
          </svg>
        </div>
      </div>
    </div>
    
    <!-- 快捷操作区域 -->
    <div
      v-if="showQuickActions"
      class="quick-actions"
    >
      <div class="actions-header">
        <h4 class="actions-title">
          快捷操作
        </h4>
      </div>
      
      <div class="actions-grid">
        <!-- 条文解读快捷操作 -->
        <template v-if="aiStore.currentFunction === 'explain'">
          <button 
            class="quick-action-btn"
            @click="$emit('quickAction', { type: 'explain', data: '请解释这个条文的含义和适用场景' })"
          >
            <span class="action-icon">📝</span>
            <span class="action-text">解释含义</span>
          </button>
          
          <button 
            class="quick-action-btn"
            @click="$emit('quickAction', { type: 'explain', data: '请举例说明这个条文的实际应用' })"
          >
            <span class="action-icon">💡</span>
            <span class="action-text">举例说明</span>
          </button>
        </template>
        
        <!-- 法律问答快捷操作 -->
        <template v-if="aiStore.currentFunction === 'question'">
          <button 
            class="quick-action-btn"
            @click="$emit('quickAction', { type: 'question', data: '我想了解关于合同纠纷的处理方式' })"
          >
            <span class="action-icon">📋</span>
            <span class="action-text">合同纠纷</span>
          </button>
          
          <button 
            class="quick-action-btn"
            @click="$emit('quickAction', { type: 'question', data: '婚姻家庭纠纷如何解决？' })"
          >
            <span class="action-icon">👨‍👩‍👧‍👦</span>
            <span class="action-text">婚姻家庭</span>
          </button>
          
          <button 
            class="quick-action-btn"
            @click="$emit('quickAction', { type: 'question', data: '房产买卖中需要注意什么？' })"
          >
            <span class="action-icon">🏠</span>
            <span class="action-text">房产买卖</span>
          </button>
        </template>
        
        <!-- 搜索建议快捷操作 -->
        <template v-if="aiStore.currentFunction === 'suggestions'">
          <button 
            class="quick-action-btn"
            @click="$emit('quickAction', { type: 'suggestions', data: '离婚' })"
          >
            <span class="action-icon">💔</span>
            <span class="action-text">离婚相关</span>
          </button>
          
          <button 
            class="quick-action-btn"
            @click="$emit('quickAction', { type: 'suggestions', data: '继承' })"
          >
            <span class="action-icon">📜</span>
            <span class="action-text">继承相关</span>
          </button>
          
          <button 
            class="quick-action-btn"
            @click="$emit('quickAction', { type: 'suggestions', data: '借贷' })"
          >
            <span class="action-icon">💰</span>
            <span class="action-text">借贷相关</span>
          </button>
        </template>
        
        <!-- 场景分析快捷操作 -->
        <template v-if="aiStore.currentFunction === 'scenario'">
          <button 
            class="quick-action-btn"
            @click="$emit('quickAction', { type: 'scenario', data: '我在网上购买的商品有质量问题，商家拒绝退货，我该怎么办？' })"
          >
            <span class="action-icon">🛒</span>
            <span class="action-text">网购纠纷</span>
          </button>
          
          <button 
            class="quick-action-btn"
            @click="$emit('quickAction', { type: 'scenario', data: '租房期间房东要求涨租金，这合理吗？' })"
          >
            <span class="action-icon">🏘️</span>
            <span class="action-text">租房问题</span>
          </button>
        </template>
      </div>
    </div>
    
    <!-- AI状态信息 -->
    <div class="ai-status-panel">
      <div class="status-header">
        <h4 class="status-title">
          AI服务状态
        </h4>
      </div>
      
      <div class="status-content">
        <div class="status-item">
          <div class="status-label">
            服务状态
          </div>
          <div
            class="status-value"
            :class="healthStatusClass"
          >
            <div class="status-dot" />
            <span>{{ healthStatusText }}</span>
          </div>
        </div>
        
        <div
          v-if="aiStore.aiHealthStatus?.model"
          class="status-item"
        >
          <div class="status-label">
            AI模型
          </div>
          <div class="status-value">
            {{ aiStore.aiHealthStatus.model }}
          </div>
        </div>
        
        <div
          v-if="aiStore.aiHealthStatus?.responseTime"
          class="status-item"
        >
          <div class="status-label">
            响应时间
          </div>
          <div class="status-value">
            {{ Math.round(aiStore.aiHealthStatus.responseTime * 1000) }}ms
          </div>
        </div>
        
        <div class="status-item">
          <div class="status-label">
            对话历史
          </div>
          <div class="status-value">
            {{ aiStore.conversations.length }} 条
          </div>
        </div>
      </div>
      
      <div class="status-actions">
        <button 
          class="status-action-btn"
          :disabled="isRefreshing"
          title="刷新状态"
          @click="refreshStatus"
        >
          <svg 
            class="w-4 h-4" 
            :class="{ 'animate-spin': isRefreshing }"
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
            />
          </svg>
          <span>刷新</span>
        </button>
        
        <button 
          class="status-action-btn"
          :disabled="aiStore.conversations.length === 0"
          title="清空历史"
          @click="clearHistory"
        >
          <svg
            class="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
            />
          </svg>
          <span>清空</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAIStore } from '@/stores/ai'

const emit = defineEmits(['quickAction'])
const aiStore = useAIStore()

// 响应式状态
const isRefreshing = ref(false)

// 计算属性
const showQuickActions = computed(() => 
  aiStore.currentFunction !== 'chat'
)

const healthStatusClass = computed(() => {
  if (aiStore.aiHealthStatus?.success) return 'status-healthy'
  if (aiStore.aiHealthStatus?.success === false) return 'status-error'
  return 'status-unknown'
})

const healthStatusText = computed(() => {
  if (aiStore.isLoading) return 'AI思考中...'
  if (aiStore.error) return '服务异常'
  if (aiStore.aiHealthStatus?.success) return '服务正常'
  return '检查中...'
})

// 方法
const selectFunction = (functionKey) => {
  if (aiStore.isLoading) return
  aiStore.setCurrentFunction(functionKey)
}

const refreshStatus = async () => {
  if (isRefreshing.value) return
  
  isRefreshing.value = true
  try {
    await aiStore.checkAIHealth()
  } catch (error) {
    console.error('刷新AI状态失败:', error)
  } finally {
    isRefreshing.value = false
  }
}

const clearHistory = () => {
  if (aiStore.conversations.length === 0) return
  
  if (confirm('确定要清空所有对话历史吗？')) {
    aiStore.clearConversations()
  }
}
</script>

<style scoped>
.ai-function-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  max-width: 400px;
}

.panel-header {
  text-align: center;
}

.panel-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.panel-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.function-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.function-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.function-card:hover:not(.disabled) {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.function-card.active {
  border-color: #667eea;
  background: linear-gradient(135deg, #667eea08 0%, #764ba208 100%);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.function-card.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.card-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-emoji {
  font-size: 24px;
  filter: grayscale(0);
}

.card-content {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.card-description {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

.card-indicator {
  width: 24px;
  height: 24px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-actions {
  background: white;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
}

.actions-header {
  margin-bottom: 12px;
}

.actions-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.quick-action-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.action-icon {
  font-size: 20px;
}

.action-text {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}

.ai-status-panel {
  background: white;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
}

.status-header {
  margin-bottom: 12px;
}

.status-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

.status-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-label {
  font-size: 12px;
  color: #64748b;
}

.status-value {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-healthy .status-dot {
  background: #10b981;
}

.status-error .status-dot {
  background: #ef4444;
}

.status-unknown .status-dot {
  background: #f59e0b;
}

.status-actions {
  display: flex;
  gap: 8px;
}

.status-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
  color: #475569;
}

.status-action-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.status-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ai-function-panel {
    padding: 16px;
    gap: 20px;
  }
  
  .function-card {
    padding: 12px;
    gap: 12px;
  }
  
  .card-icon {
    width: 40px;
    height: 40px;
  }
  
  .icon-emoji {
    font-size: 20px;
  }
  
  .card-title {
    font-size: 14px;
  }
  
  .card-description {
    font-size: 12px;
  }
  
  .actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  
  .quick-action-btn {
    padding: 10px 6px;
  }
  
  .action-icon {
    font-size: 18px;
  }
  
  .action-text {
    font-size: 11px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .ai-function-panel {
    background: #1e293b;
  }
  
  .panel-title {
    color: #f1f5f9;
  }
  
  .panel-subtitle {
    color: #94a3b8;
  }
  
  .function-card {
    background: #334155;
    border-color: #475569;
  }
  
  .function-card.active {
    background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
  }
  
  .card-title {
    color: #f1f5f9;
  }
  
  .card-description {
    color: #94a3b8;
  }
  
  .quick-actions,
  .ai-status-panel {
    background: #334155;
    border-color: #475569;
  }
  
  .actions-title,
  .status-title {
    color: #f1f5f9;
  }
  
  .quick-action-btn,
  .status-action-btn {
    background: #475569;
    border-color: #64748b;
    color: #e2e8f0;
  }
  
  .action-text {
    color: #cbd5e1;
  }
  
  .status-label {
    color: #94a3b8;
  }
  
  .status-value {
    color: #f1f5f9;
  }
}
</style>
